<template>
	<div class="hello">
		<div id="wrapper" class="wrapper" style="height: 100%;">
			<header class="topnavbar-wrapper" id="topnav">
				<topnav></topnav>
			</header>
			<!--<!-- sidebar-->
			<div class="contener">
				<aside class="aside" id="aside">
					<sidebard></sidebard>
				</aside>
				<!-- offsidebar-->
				<section id="app"  v-bind:class="{ 'margin':hiede , 'margin1':  isshow}" style="">
					<!-- @RenderBody() -->
					<router-view></router-view>
					<!--<footer id="footer">
						<footerdiv></footerdiv>
					</footer>-->
				</section>
				
			</div>
		</div>
	</div>
</template>

<script>
	import emitt from './emit'
	import topnav from './topnav'
	import sidebard from './sidebar'
	import footerdiv from './footer'
	export default {
		name: 'home',
		components: {
			topnav,
			footerdiv,
			sidebard
		},
		data(){
			return{
				isshow:true,
				hiede:false
			}
		},
		mounted:function(){
			var me =this
			emitt.$on("toggle", function (isshow) {
           		me.hiede = isshow
           		me.isshow =! isshow;
    		})	
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello {
		height: 100%;
	    position: fixed;
	    width: 100%;
	}
	.topnavbar-wrapper{
		height: 60px;
	}
	.topnavbar-wrapper div{
		height: 60px;
		
	}
	#aside{
		height: 100%;
	}
	/*#aside{
		position: fixed;
		height: 100%;
		left: 0;
		top:0
	}*/
	.contener{
		position: relative;
		height: 100%;
	}
	#aside{
		float: left;
		height: calc(100% - 60px);
		position: relative;
	}
	.aside-inner{
		height: 100%;
		position: relative;
	}
	.el-menu{
		height: 100% !important;
	}
	#footer{
		/*position: absolute;
		bottom: 50px;*/
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 100%;
	}
	.margin{
		padding-left: 20px;
		padding-top: 20px;
		transition: all 0.3s;
		overflow-y: auto;
		position: relative;
		padding-right: 20px;
	}
	.margin1{
		padding-left: 20px;
		padding-top: 20px;
		transition: all 0.5s;
		overflow-y: auto;
		position: relative;
		padding-right: 20px;
	}
</style>